<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }
  </style>
</head>

<body>

  <!-- <i class="iconfont icon-jiantou"></i> -->
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="">内容管理</a>
        <!-- <a href="">轮播图管理</a> -->
        <a><cite>内容详情</cite></a>
      </span>
    </div>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>添加文章</li>
        <li>版本详情</li>
        <li>商品管理</li>
        <!-- <li>订单管理</li> -->
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div id="test5" class="demo-tree"></div>
          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <!-- <legend>点击节点新窗口跳转</legend> -->
          </fieldset>
        </div>
        <div class="layui-tab-item">
          <form class="layui-form" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">标题：</label>
              <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <!--   <div class="layui-form-item">
              <label class="layui-form-label">密码框</label>
              <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">辅助文字</div>
            </div> -->
            <div class="layui-form-item">
              <label class="layui-form-label">模块类型</label>
              <div class="layui-input-block">
                <select name="city" lay-verify="required">
                  <option value=""></option>
                  <option value="0">相关产品</option>
                  <option value="1">行业动态</option>
                  <option value="2">行业快讯</option>
                  <option value="3">人工智能</option>
                  <option value="4">人脸识别</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">发布模块</label>
              <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="首页展示">
                <input type="checkbox" name="like[read]" title="产品中心" checked>
                <input type="checkbox" name="like[dai]" title="相关文章">
                <input type="checkbox" name="like[dai]" title="行业快讯">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">备份草稿箱</label>
              <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">发布状态</label>
              <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="公开">
                <input type="radio" name="sex" value="0" title="私密" checked>
              </div>
            </div>
            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">文章内容</label>
              <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>

        </div>
        <div class="layui-tab-item">
          <ul class="layui-timeline">
            <li class="layui-timeline-item">
              <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
              <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">1.2.01</h3>
                <p>
                  对主页的模块进行了响应式布局，在各种服务端均可访问
                  <br>加入了主页的用户评价模块，对用户的体验和交互提升
                  <br>使用了JavaScript对主页进行了升级，使网页的交互性更强了 <i class="layui-icon"></i>
                </p>
              </div>
            </li>
            <li class="layui-timeline-item">
              <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
              <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">1.1.02</h3>
                <p>项目进行了打包发布，对项目进行了小型的调优<em>页面跳转更加的灵活和人性化</em>：</p>
                <ul>
                  <li>首页模块的链接跳转进行了优化，头部导航的样式边距进行了调整</li>
                  <li>页面的动画效果进行了进一步的提升，加强了用户的交互性</li>
                </ul>
              </div>
            </li>
            <li class="layui-timeline-item">
              <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
              <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">1.1.01</h3>
                <p>
                  实现了静态首页效果，进行了原型图的设计和模块分析，使用过渡实现动画效果和元素的偏移
                  <br>项目进展快速，想要BUG居多，需要进一步的调试和优化

                </p>
              </div>
            </li>
            <li class="layui-timeline-item">
              <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
              <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">MORE</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="layui-tab-item">
          <div id="test3" class="demo-transfer"></div>
          <fieldset class="layui-elem-field layui-field-title" style="margin: 30px auto;">
            <!-- <legend>显示搜索框</legend> -->
          </fieldset>
        </div>
        <div class="layui-tab-item">5</div>
        <div class="layui-tab-item">6</div>
      </div>
    </div>
    <!-- 表格 -->

  </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>

<script>
  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  //JS
  layui.use(['element', 'layer', 'util', 'laypage'], function () {
    var element = layui.element,
      layer = layui.layer,
      util = layui.util,
      $ = layui.$;
    var laypage = layui.laypage;
    //执行一个laypage实例

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
  });
  layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage,
      layer = layui.layer;

    //总页数低于页码总数
    laypage.render({
      elem: 'demo0',
      count: 8, //数据总数
      limit: 4
    });
  });
  layui.use(['tree', 'util'], function () {
    var tree = layui.tree,
      layer = layui.layer,
      util = layui.util

      //模拟数据
      ,
      data = [{
        title: '首页',
        id: 1,
        field: 'name1',
        checked: true,
        spread: true,
        children: [{
          title: '双目深度学习',
          id: 3,
          field: 'name11',
          href: 'https://www.layui.com/',
          children: [{
            title: '人脸检测',
            id: 23,
            field: '',
            children: [{
              title: '详细信息',
              id: 24,
              field: '',
              children: [{
                title: '功能介绍',
                id: 30,
                field: ''
              }, {
                title: '应用场景',
                id: 31,
                field: ''
              }]
            }]
          }, {
            title: '人脸对比',
            id: 7,
            field: '',
            children: [{
              title: '详细信息',
              id: 15,
              field: '',
              href: 'https://www.layui.com/doc/'
            }]
          }, {
            title: '人脸搜索',
            id: 8,
            field: '',
            children: [{
              title: '详细信息',
              id: 32,
              field: ''
            }]
          }]
        }, {
          title: '革新时代',
          id: 4,
          spread: true,
          children: [{
            title: '图标展示',
            id: 9,
            field: '',
            disabled: true
          }, {
            title: '模块详情',
            id: 10,
            field: ''
          }]
        }, {
          title: '双目深度学习',
          id: 20,
          field: '',
          children: [{
            title: '展示文章',
            id: 21,
            field: ''
          }, {
            title: '文章专栏',
            id: 22,
            field: ''
          }]
        }]
      }, {
        title: '产品中心',
        id: 2,
        field: '',
        spread: true,
        children: [{
          title: '产品展示',
          id: 5,
          field: '',
          spread: true,
          children: [{
            title: '功能介绍',
            id: 11,
            field: ''
          }, {
            title: '应用场景',
            id: 12,
            field: ''
          }]
        }, {
          title: '产品信息',
          id: 6,
          field: '',
          children: [{
            title: '产品展示顺序',

            id: 13,
            field: ''
          }, {
            // title: '产品展示顺序',
            title: '产品序号',

            id: 14,
            field: '',
            disabled: true
          }]
        }]
      }, {
        title: '行业动态',
        id: 16,
        field: '',
        children: [{
          title: '文章模块',
          id: 17,
          field: '',
          fixed: true,
          children: [{
            title: '文章标题',
            id: 18,
            field: ''
          }, {
            title: '文章内容',
            id: 19,
            field: ''
          }]
        }, {
          title: '快讯模块',
          id: 27,
          field: '',
          children: [{
            title: '快讯标题',
            id: 28,
            field: ''
          }, {
            title: '款寻内容',
            id: 29,
            field: ''
          }]
        }]
      }]


    //基本演示
    tree.render({
      elem: '#test12',
      data: data,
      showCheckbox: true //是否显示复选框
        ,
      id: 'demoId1',
      isJump: true //是否允许点击节点时弹出新窗口跳转
        ,
      click: function (obj) {
        var data = obj.data; //获取当前点击的节点数据
        layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
      }
    });

    //按钮事件
    util.event('lay-demo', {
      getChecked: function (othis) {
        var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

        layer.alert(JSON.stringify(checkedData), {
          shade: 0
        });
        // console.log(checkedData);
      },
      setChecked: function () {
        tree.setChecked('demoId1', [12, 16]); //勾选指定节点
      },
      reload: function () {
        //重载实例
        tree.reload('demoId1', {

        });

      }
    });
    //点击节点新窗口跳转
    tree.render({
      elem: '#test5',
      data: data,
      isJump: true //link 为参数匹配
    });
    //Demo
    layui.use('form', function () {
      var form = layui.form;

      //监听提交
      form.on('submit(formDemo)', function (data) {
        layer.msg(JSON.stringify(data.field));
        return false;
      });
    });
  });

  layui.use(['transfer', 'layer', 'util'], function () {
    var $ = layui.$,
      transfer = layui.transfer,
      layer = layui.layer,
      util = layui.util;

    //模拟数据
    var data1 = [{
      "value": "1",
      "title": "大师与设计师"
    }, {
      "value": "2",
      "title": "不是小偷就是设计师"
    }, {
      "value": "3",
      "title": "是XX建站公司吗?"
    }, {
      "value": "4",
      "title": "设计师的歌单"
    }, {
      "value": "5",
      "title": "人工智能发展趋势",
      "disabled": true
    }, {
      "value": "6",
      "title": "	给大象转个身"
    }, {
      "value": "7",
      "title": "	设计行业也有相貌歧视？"
    }, {
      "value": "8",
      "title": "论PS和Photoshop的区别"
    }, {
      "value": "9",
      "title": "人工智能革命"
    }]
    //显示搜索框
    transfer.render({
      elem: '#test3',
      data: data1,
      title: ['文章管理', '首页详情'],
      showSearch: true,
      width: 400
    })
    //批量办法定事件
    util.event('lay-demoTransferActive', {
      getData: function (othis) {
        var getData = transfer.getData('key123'); //获取右侧数据
        layer.alert(JSON.stringify(getData));
      },
      reload: function () {
        //实例重载
        transfer.reload('key123', {
          title: ['文人', '喜欢的文人'],
          value: ['2', '5', '9'],
          showSearch: true
        })
      }
    });
  });
</script>
